import React, {Component} from "react";
import {observer,inject} from "mobx-react";
import {computed,toJS} from "mobx";
import {View} from "../component/index.jsx";
import {Input,Button,Modal,Tree,Cascader,Tabs,Upload,Popover} from "antd";
import {
  UploadOutlined
} from '@ant-design/icons';
const {TextArea}  = Input;
// const {TreeNode}    = Tree;
const TabPane     = Tabs.TabPane;


const style={
  item:{
    alignItems:"center",
    justifyContent:"center",
    margin:10,
    flexDirection:"row"
  }
};


// 分类管理
@inject(["store"])
@observer
class Type extends Component{
  constructor(props){
    super(props);
    this.store = props.store;
    this.type = props.store.storeType;
    
  }
  
  // loading
  @computed get loading(){return this.store.loading;}
  // 高度
  @computed get height() {return this.store.sys.contHeight;}
  @computed get treeWidth(){return this.store.treeWidth;}

  // treeData
  @computed get treeData() {return this.type.treeData}
  @computed get options(){return this.type.options.slice();}
  // 表单信息
  @computed get form(){return this.type.form;}
  @computed get selectedKeys(){return this.type.selectedKeys.slice();}
  @computed get loadedKeys(){return this.type.loadedKeys.slice();}

  componentDidMount(){
    if(!this.treeData.length){
      this.type.init();
    }
    this.store.navigation({page:"Type"});

  }
  
  // renderTreeNodes = (data) => {
  //   return data.map((item) => {
  //     const title = (
  //       <Popover 
  //         placement="right" 
  //         title={item.tit} 
  //         content={
  //           <div>
  //             <p>id:{item.id}</p>
  //             <p>upid:{item.upid}</p>
  //             <p>tit:{item.tit}</p>
  //             <p>cont:{item.cont}</p>
  //           </div>
  //         } 
  //         trigger="contextMenu">
  //         <span>{item.tit}</span>
  //       </Popover>
  //     );
  //     if (item.children) {
  //       return (
  //         <TreeNode title={item.tit} key={item.id} dataRef={item}>
  //           {this.renderTreeNodes(item.children)}
  //         </TreeNode>
  //       );
  //     }
  //     return <TreeNode {...item} dataRef={item} title={title} />;
  //   });
  // }



  render(){
    const form = this.form;
    return(
      <View style={{overflow:"hidden",height:this.height-50,flex:1}}>
        <div
          style={{
            borderRight:"1px #f6f6f6 solid",
            height:this.height-50,
            width:this.treeWidth,
            overflow:"auto",
            padding:10
          }}
          onMouseDown={e => {
            e.preventDefault()
            // e = e || event
            let { clientX, clientY } = e
            let width = parseFloat(this.treeWidth)
            document.body.onmousemove = (e: any) => {
                // e = e || event
                let newWidth = width + (e.clientX - clientX)
                this.store.set("treeWidth",newWidth);
            }
            document.body.onmouseup = function () {
                document.body.onmousemove = null
            }
          }}
          >
          {this.treeData.length===0?null:
            <Tree
              loadData={this.type.onLoadData}
              treeData={this.treeData}
              onLoad={loadedKeys=>this.type.set("loadedKeys",loadedKeys)}
              loadedKeys={this.loadedKeys}
              onSelect={this.type.onSelect}
              selectedKeys={this.selectedKeys}
              showLine
              // onExpand={(expandedKeys)=>console.log(exp]]andedKeys)}
            >
            </Tree>
          }
        </div>
        
        <Tabs defaultActiveKey="insert" style={{flex:1,height:this.height-42,padding:10}}>
          <TabPane tab="新建" key="insert">
            <View style={{height:"100%",overflow:"hidden",flexDirection:"column"}}>
              <View style={style.item}>
                <label>上级分类：</label>
                <div style={{flex:1}}>
                  <Cascader
                    options={this.options}
                    loadData={selectedOptions=>this.type.onLoadOption(selectedOptions)}
                    onChange={(value,selectedOptions)=>{
                      const len = value.length-1;
                      this.type.set("form-insert-uptit",selectedOptions[len].label);
                      this.type.set("form-insert-upid",value[len]);
                    }}
                    changeOnSelect
                  >
                    <Input readOnly value={form.insert.uptit} />
                  </Cascader>
                </div>
              </View>
              <View style={style.item}><label>分类名称：</label><Input onChange={e=>this.type.set("form-insert-tit",e.target.value)} value={form.insert.tit} style={{flex:1}} /></View>
              <View style={style.item}><label>分类类型：</label><Input onChange={e=>this.type.set("form-insert-tp",e.target.value)} value={form.insert.tp} style={{flex:1}} /></View>
              <View style={style.item}><label>分类图标：</label>
                <Input 
                  onChange={e=>this.type.set("form-insert-image",e.target.value)} 
                  value={form.insert.image} 
                  style={{flex:1,marginRight:5}} 
                />
                <Upload
                  withCredentials
                  showUploadList={false}
                  name="image"
                  action={this.store.url.concat("?act=admin-upload&tp=image")}
                  onChange={info=>this.type.uploadChange(info,"insert-image")}
                  >
                  <Button>
                    <UploadOutlined /> Upload
                  </Button>
                </Upload>
              </View>
              <View style={style.item}><label>分类简介：</label><TextArea style={{flex:1,height:100}} onChange={e=>this.type.set("form-insert-cont",e.target.value)} value={form.insert.cont} /></View>
              <View style={Object.assign({marginTop:40},style.item)}>
                <Button 
                  loading={this.loading} 
                  onClick={()=>this.type.insert()} 
                  type="primary" 
                  style={{flex:1}}
                  disabled={!form.insert.tit?true:false}
                >
                  新增分类
                </Button>
              </View>
            </View>
          </TabPane>
          <TabPane tab="编辑" key="update">
            <View style={{height:"100%",overflow:"hidden",flexDirection:"column"}}>
              <View style={style.item}><label>分类编号：</label><span style={{flex:1}}>{form.update.id}</span></View>
              <View style={style.item}>
                <label>上级分类：</label>
                <div style={{flex:1}}>
                  <Cascader
                    options={this.options}
                    loadData={this.type.onLoadOption}
                    onChange={(value,selectedOptions)=>{
                      const len = value.length-1;
                      this.type.set("form-update-uptit",selectedOptions[len].label);
                      this.type.set("form-update-upid",value[len]);
                    }}
                    changeOnSelect
                  >
                    <Input value={form.update.uptit} />
                  </Cascader>
                </div>
              </View>
              <View style={style.item}><label>分类名称：</label><Input onChange={e=>this.type.set("form-update-tit",e.target.value)} value={form.update.tit} style={{flex:1}} /></View>
              <View style={style.item}><label>分类类型：</label><Input onChange={e=>this.type.set("form-update-tp",e.target.value)} value={form.update.tp} style={{flex:1}} /></View>
              <View style={style.item}><label>分类图标：</label>
                <Input 
                  onChange={e=>this.type.set("form-update-image",e.target.value)} 
                  value={form.update.image} 
                  style={{flex:1,marginRight:5}} 
                />
                <Upload
                  withCredentials
                  showUploadList={false}
                  name="image"
                  action={this.store.url.concat("?act=admin-upload&tp=image")}
                  onChange={info=>this.type.uploadChange(info,"update-image")}
                  >
                  <Button>
                    <UploadOutlined /> Upload
                  </Button>
                </Upload>
              </View>
              <View style={style.item}><label>分类简介：</label><TextArea style={{flex:1,height:100}} onChange={e=>this.type.set("form-update-cont",e.target.value)} value={form.update.cont} /></View>
              <View style={Object.assign({marginTop:40},style.item)}>
                <Button 
                  disabled={!form.update.id?true:false}
                  onClick={()=>this.type.update()} 
                  loading={this.loading}
                  type="primary"
                  style={{flex:1}}>
                  编辑分类
                </Button>
              </View>
            </View>
          </TabPane>
          <TabPane tab="删除" key="delete">
            <View style={{height:"100%",overflow:"hidden",flexDirection:"column"}}>
              <View style={style.item}><label>当前分类：</label><span style={{flex:1}}>{form.update.tit}</span></View>
              <View style={Object.assign({marginTop:200},style.item)}>
                <Button
                  onClick={()=>{
                    Modal.confirm({
                      title: "确认删除",
                      content: "是否真的要删除分类：".concat(this.form.update.tit),
                      onOk:()=>{
                        this.type.delete();
                        return new Promise((resolve, reject) => {
                          setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
                        }).catch(() => console.log("Oops errors!"));
                      },
                      onCancel() {},
                    });
                  }}
                  loading={this.loading}
                  type="danger"
                  style={{flex:1}}
                  disabled={!form.update.id?true:false}
                >
                  删除所选分类
                </Button>
              </View>
            </View>
          </TabPane>
          <TabPane tab="刷新" key="refresh">
            <Button onClick={()=>this.type.init()}>刷新</Button>
          </TabPane>
        </Tabs>
      </View>
    );
  }
}
export default Type;